<template>
	<view class="home">
		<custom-navbar title="活动报名" :show-back="true" @back="handleBack" />

		<view class="content  pb150" :style="{ paddingTop: navBarHeight + 'px' }">

			<view class="w100">
				<view class="cover">
					<image class="img" :src="activityDetail.activity_cover"></image>
					<view class="top fcc">
						<image class="rentout" :src="cdn('仅出租.svg')"></image>
						<view v-if="activityDetail.activity_status_text == '待开始'" class="text f22bc99A2E"
							style="color: #FF0C10;">
							待开始
						</view>
						<view v-if="activityDetail.activity_status_text == '进行中'" class="text f22bc99A2E"
							style="color: #398DFB;">
							进行中
						</view>
						<view v-if="activityDetail.activity_status_text == '已完成'" class="text f22bc99A2E"
							style="color: #999999;">
							已完成
						</view>
					</view>
				</view>
				<view class="w100">
					<view class="adess p4030 mb20">
						<view class="f34bc0 mb30">{{activityDetail.activity_title}}</view>
						<view class="adessbox">
						</view>
						<view class="text f245c3 p4030 fcols">
							<view class="fc">
								<image class="img wh30" src="/static/images/activity/Frame.svg"></image>
								<view class="ml20">活动分类：{{activityDetail.activity_category_id_text}}</view>
							</view>
							<view class="fc ">
								<image class="img wh30" src="/static/images/activity/Frame (1).svg"></image>
								<view class="ml20">
									活动城市：{{activityDetail.province_id_text}}{{activityDetail.city_id_text}}{{activityDetail.district_id_text}}
								</view>
							</view>
							<view class="fc">
								<image class="img wh30" src="/static/images/activity/Frame (2).svg"></image>
								<view class="ml20">
									活动地址：{{activityDetail.city_id_text}}{{activityDetail.district_id_text}}</view>
							</view>
							<view class="fc">
								<image class="img wh30" src="/static/images/activity/Frame (3).svg"></image>
								<view class="ml20">
									活动时间：{{activityDetail.activity_start_time}}至{{activityDetail.activity_end_time}}
								</view>
							</view>
						</view>
					</view>
					<view class="referral p4030">
						<view class="fcsb mb45">
							<view class="tilte fcc">
								<view class="f36bc0">活动介绍</view>
								<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
							</view>
						</view>
						<mp-html :content="activityDetail.activity_details" />
					</view>
				</view>
			</view>
		</view>
		<view class="share w100 p2030 fcsb">
			<button open-type="share" class="share-btn"
				style="background: none; border: none; padding: 0; margin: 0; line-height: 1;border-radius: 0;">
				<image src="/static/images/activity/分享.svg" class="wh40"></image>
				<view class="f20bc3">我要分享</view>
			</button>
			<view class="btn fcc"
				v-if="activityDetail.activity_status_text == '待开始' || activityDetail.activity_status_text == '进行中'"
				@click="submit()">
				<view class="f24bcf">报名参加</view>
			</view>

			<up-button v-else type="default" :hairline="true" :disabled="disabled" text="报名已结束"
				style="border: 1rpx solid #f4f5f6;flex: 1;width: 100%;margin-left: 64rpx;"></up-button>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	import {
		ActivityDetail
	} from '@/api/activity'
	import {
		useUserStore
	} from '@/stores/user'
	import {
		useI18n
	} from 'vue-i18n'
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import CustomNavbar from '@/components/custom-navbar.vue'
	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path
	const {
		t
	} = useI18n()
	const userStore = useUserStore()
	const searchKey = ref('')

	// 登录状态：'loading'|'success'|'error'
	const loginStatus = ref('loading')

	// 获取系统信息
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	const bgStyle = ref({})


	// 初始化
	// 获取路由参数
	const activityId = ref('')
	const activityDetail = ref({})
	onMounted(() => {
		// // 获取上个页面传递的参数
		// const eventChannel = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel()

		// // 监听acceptDataFromOpenerPage事件，获取数据
		// eventChannel.on('acceptDataFromOpenerPage', function(data) {
		// 	activityId.value = data.id
		// 	fetchActivityDetail()
		// })

		// 或者直接从当前页面路由参数获取
		// setTimeout(() => {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		activityId.value = options.id

		fetchActivityDetail()
		// }, 100)/
	})
	// 获取活动详情
	const fetchActivityDetail = async () => {

		try {
			if (!activityId.value) {
				throw new Error('缺少活动ID参数')
			}

			const res = await ActivityDetail(activityId.value)
			if (res.code === 200) {
				activityDetail.value = res.data
			} else {
				throw new Error(res.message || '获取详情失败')
			}
		} catch (error) {
			console.error('获取活动详情失败:', error)
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
			// 可以在这里返回上一页
			// uni.navigateBack()
		}
	}
	const activityData = ref({
		activity_cover: 'https://gx.jifgou.com/image/item.jpg',
		activity_title: '高新技术企业研讨会',
		date: '活动时间：2024-02-03 9:00至2024-02-03 12:00',
		addss: '活动地点：天津子牙高新园',
		category: '园区活动',
		type: 0
	})
	const isFromShare = ref(false)
	onLoad((options) => {
		if (options.share === 'true') {
			// 标记是分享进入的
			isFromShare.value = true;
		}
	});

	const handleBack = () => {
		if (isFromShare.value || getCurrentPages().length <= 1) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		} else {
			uni.navigateBack();
		}
	};
	const submit = () => {
		uni.navigateTo({
			url: `/pages/activity/submit?id=${activityId.value}` // 假设item对象中有id字段
		});
	};
	// 页面级分享配置（ 用户点击右上角分享时触发）
	onShareAppMessage(() => {
		// 确保 activityDetail 已加载
		if (!activityDetail.value.activity_title) {
			return {
				title: '活动报名',
				path: `/pages/activity/apply?id=${activityId.value}`,
				imageUrl: '/static/share.jpg'
			};
		}

		return {
			title: `活动报名 - ${activityDetail.value.activity_title}`,
			path: `/pages/activity/apply?id=${activityId.value}&share=true`,
			imageUrl: activityDetail.value.activity_cover || '/static/share.jpg'
		};
	});
	// 朋友圈分享配置（微信小程序独有）
	onShareTimeline(() => {
		return {
			title: `活动报名 - ${activityDetail.value.activity_title || '精彩活动'}`,
			query: `id=${activityId.value}`, // 注意是字符串，不带 ?
			imageUrl: activityDetail.value.activity_cover || '/static/share.jpg'
		};
	});
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 44px);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tab {
				width: 170rpx;
				height: 66rpx;
				background: #FFFFFF;
				border-radius: 500rpx 500rpx 500rpx 500rpx;
			}

			.cover {

				height: 328rpx;
				width: 100%;
				position: relative;

				.img {

					width: 100%;
					height: 328rpx;
				}

				.top {
					position: absolute;
					right: 30rpx;
					top: 0;
					width: 100rpx;

					.rentout {
						width: 100rpx;
						height: 94rpx;
					}

					.text {
						position: absolute;
						top: 44rpx;
					}
				}
			}

			.adess {
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				height: 422rpx;
				background: #FFFFFF;
				position: relative;

				.adessbox {
					width: 100%;
					height: 280rpx;
					background: #398DFB;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					opacity: 0.05;
					// position: relative;
					// top: -254rpx;
				}

				.text {
					position: absolute;
					height: 280rpx;
					top: 106rpx;
				}

			}

			.referral {
				background: #FFFFFF;

				.tilte {
					position: relative;

					.tliteimg {
						width: 75rpx;
						height: 15.37rpx;
						position: absolute;
						bottom: -8rpx;
					}
				}
			}


		}

		.share {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;

			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(41, 44, 54, 0.2);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.share-btn {
				background: none !important; // 移除背景
				border: none !important; // 移除边框
				padding: 0 !important; // 移除内边距
				margin: 0 !important; // 移除外边距
				line-height: 1; // 防止文字偏移
				display: inline-flex; // 保持 flex 布局
				align-items: center; // 垂直居中
				justify-content: center; // 水平居中

				&::after {
					display: none; // 移除微信 button 默认的 after 伪元素（可能带边框）
				}
			}

			.btn {
				width: 500rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}
		}
	}
</style>